<template>
  <div class="app-nodata-view">
    
    <div class="app-nodata-img-container">
      <img class="app-nodata-img" :src="noticeImg || NO_DATA_IMG">
    </div>
    
    <template v-if="messageSlot">
      <slot name="message">
      </slot>
    </template>
    
    <div class="app-nodata-notice" v-else>
      {{ noticeMsg }}
      <span v-if="canClick" class="action-text" @click="goAction">{{ actionText }}</span>
    </div>
    
  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const NO_DATA_IMG = getOssUrl('/no_data.png');
import i18n from '@src/locales';
const $t = i18n.t.bind(i18n);

export default {
  name: 'no-data-view-new',
  props: {
    noticeMsg: {
      type: String,
      default: $t('common.base.tip.noData')
    },
    actionText: {
      type: String,
      default: ''
    },
    canClick: {
      type: Boolean,
      default: false,
    },
    noticeImg:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      NO_DATA_IMG
    }
  },
  computed: {
    messageSlot() {
      return this.$slots.message;
    }
  },
  methods: {
    goAction() {
      this.$emit('goAction')
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-nodata-view {
    .app-nodata-img-container {
      display: flex;
      justify-content: center;
      align-items: center;

      padding-top: 40px;
      
      .app-nodata-img {
        width: 160px;
        height: 160px;
      }
    }

    .app-nodata-notice {
      padding-top: 8px;
      text-align: center;
      color: $text-color-regular;
      font-size: $font-size-base;
      line-height: 20px;
      .action-text {
        color: $color-primary-light-6;
        cursor: pointer;
      }
    }
  }
</style>